<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>Chromkie</title>
<script src="jquery.js" type="text/javascript"></script>
<!--http://code.jquery.com/jquery-nightly.min.js-->
<script scr="chromkie.js" type="text/javascript"></script>

<style>
h1,h2{padding:5px;margin:0;text-align:center;}
#explorer{
padding:10px;
margin:auto;
width:80%;
overflow:auto;
/*table-layout:fixed;word-wrap: break-word;overflow:hidden;*/
word-break: break-all;
border:1px solid black;
border-radius:10px;
/*position: absolute;*/
}
/*#explorer_header th,#explorer th:nth-child(0n+1){word-wrap: normal;word-break: normal;color:blue;}#explorer th:nth-child(0n+3){width:300px;}*/
#explorer_header{background:#688 !important;font:large Verdana, Geneva, sans-serif;color: #FFF;}
#explorer tr:nth-child(2n){background:#CDA;}
#explorer tr:nth-child(2n+1){background:#DEF;}
.hL{
/*background:#543;color:#DDC;*/
background:yellow;
}
#resultBox{/*position: relative;*/ padding: 1em; margin: 1em; border:1px solid black;border-radius:10px;}
#filter{display:inline;}
#noOfC{float:right;}

#debug{display:none; position:absolute; right: 10px; top:10px; border:1px solid black;border-radius:10px; width:50px; padding:10px;padding-right:20px;background:rgba(255,238,170,0.5); max-height:400px;overflow:hidden;}
#debug p{margin:0;color:rgba(0,0,0,.5)}
</style>
<script>
$(document).ready(function () {
	var defaultPref={"searchBox":[]}
	var Pref = (localStorage.Pref)?JSON.parse(localStorage.Pref):defaultPref;
	var Explorer = {
		init: function () {
			console.log("Explorer init.");
			this.getAll(0, 9);
			this.searchBox.init();
			this.tools.init();
		}, some: [0, 0],
		getAll: function (start, end) {
			if (end) this.some = [start, end];
			if(Pref.searchBox.length){this.showC(Pref.searchBox);return;}
			chrome.cookies.getAll({}, function (r) {
				console.log("response length: " + r.length);
				console.log("getAll")
				Explorer.showC(r);
			})
		}, showC: function (r,sea) {
			$("#explorer table tbody").children().not("#explorer_header").remove();
			var start = (function(){return Explorer.some[0];})()
			var end = (function(){return Explorer.some[1];})()
 			var no=(r.length)?1:0;
			if(sea){
				var query = $("#search").val();
				var type = $("input[name='filter']:checked")[0].id;
			}
			console.log("start: "+start+" end: "+end+" search r: "+r.length);
			for (var i = (start) ? start : 0; i < r.length; i++) {
				if (i > end) {
					//this.some=[this.some[0]+10,this.some[1]+10];
					this.showLess(r);this.showMore(r);
					console.log("i: "+i+" start: "+start+" end: "+end+" r.length: "+r.length);
					if(start==0){$("#less").hide();}
					Explorer.tools.initDOM();
					$("#noOfC").text("Showing "+(start+no)+"-"+(i)+" of "+r.length);
					return;
				}
				var d = r[i].domain;
				var n = r[i].name;
				var v = unescape(r[i].value);
				if(sea){switch(type){
					case "domain":
					d=d.slice(0,d.search(query))+"<span class='hL'>"+query+"</span>"+d.slice(d.search(query)+query.length);break;
					case "name":
					n=n.slice(0,n.search(query))+"<span class='hL'>"+query+"</span>"+n.slice(n.search(query)+query.length);break;
					case "value":
					v=v.slice(0,v.search(query))+"<span class='hL'>"+query+"</span>"+v.slice(v.search(query)+query.length);break;
				}};
				var e = 1000 * r[i].expirationDate;
				var date = new Date(e).toDateString();
				date = (!e) ? "After Close" : date; //date.setTime(e);
				$("#explorer tbody").append("<tr><td><input type='checkbox' name='selectedC'></td><td><img class='delC"+i+"' src='cross.png'/></td><td nowrap>" + d + "</td><td>" + n + "</td><td>" + v + "</td><td nowrap>" + date + "</td></tr>");
			};
			Explorer.tools.initDOM();
			if(end+1==r.length){$("#more").hide();}
			if(end > r.length){
			//this.some=[this.some[0]+10,this.some[1]+10];
			this.showLess(r);this.showMore(r);
			console.log(this.some);$("#more").hide();}
			if(r.length==0||(start==0&&end>r.length)){$("#more,#less").hide();}
 			$("#noOfC").text("Showing "+(start+no)+"-"+(i)+" of "+r.length);
		}, showMore: function (r) {
			var max=r.length;
			$("#more").show();
			if (!$("#more").length) {
				$("#explorer").append("<a id='more' href='#'>Next</a>");
				$("#more").click(function (r) {
					var n = Explorer.some;
					var max=r.length;
					n = Explorer.some = [n[0] + 10, n[1] + 10];
					$("#explorer tbody").children().not("#explorer_header").remove()
					if($("#search").val()){Explorer.showC(Explorer.searchBox.searchResult,1);return;}
					Explorer.getAll(n[0], n[1]);
				});
			}
		},  showLess: function (r) {
			$("#less").show();
			if (!$("#less").length) {
				$("#explorer").append("<a id='less' href='#'>Prev</a> ");
				$("#less").click(function (r) {
					var n = Explorer.some;
					var max=r.length;
					n = Explorer.some = [n[0] - 10, n[1] - 10];
					$("#explorer tbody").children().not("#explorer_header").remove()
					if($("#search").val()){Explorer.showC(Explorer.searchBox.searchResult,1);return;}
					Explorer.getAll(n[0], n[1]);
				});
			}
		}, searchBox: {
			lastQuery: [""]
			, init: function(){
				this.getRecord();
				$("#search").bind({
					dblclick:function(){
						this.value="";
						var l=Explorer.searchBox.lastQuery;
						l.splice(0,0,"");
						l.splice(2,1);
						Explorer.getAll(0, 9);},
					focusin:function(e){
						//if($("#search").val().length){Explorer.searchBox.search(null,1);return;}else{}
						$(this).focus();
					}, keyup:function(e){
						keys=",16,17,18,19,37,38,39,40,46,";
						var w=","+e.which+",";
						var i=keys.indexOf(w);
						var l=$("#search").val().length;
						if((w=="70"&&e.ctrlKey)||(!l&&i!=-1)){/*console.log(l+" "+i+" Keyup return");*/return;}
						var t=$(this).val();
						//console.log(Explorer.searchBox.lastQuery[0]);
						/*if(Explorer.searchBox.lastQuery[0]=="foo"){
						Explorer.searchBox.lastQuery[0]=t;
						Explorer.some=[0,9];Explorer.searchBox.search(t);return;}
						Explorer.searchBox.lastQuery[1]=t;*/
						var l=Explorer.searchBox.lastQuery;
						l.splice(0,0,t);
						l.splice(2,1);console.log(l);
						if(l[0]==l[1]){console.log("same query");return;}
						Explorer.some=[0,9];Explorer.searchBox.search(t)}
				});
				$("#reloadRec").click(function(){Explorer.searchBox.getRecord(1);});
				$("#filter").click(function(){var q=$("#search").val();if(q.length){Explorer.searchBox.search(q);}});
			}, getRecord: function(reload){
				if(reload){Pref.searchBox=[];}
				if(Pref.searchBox.length){return;}
				chrome.cookies.getAll({}, function (r) {
				$("#search").after("<img id='load' src='load.gif'></img>");
				for (var i = 0; i < r.length; i++) {
					var d = r[i].domain;
					var n = r[i].name;
					var v = unescape(r[i].value);
					var date = r[i].expirationDate;
					siteData={"domain":d,"name":n,"value":v,"expirationDate":date};
					Pref.searchBox.push(siteData);
				}
				var p = JSON.stringify(Pref);
				$("#load").fadeOut("slow");
				Explorer.tools.setItem('Pref', p);
				});
				$("#load").hide();
			}, search: function(query,s){
				var result = [];
				var type = $("input[name='filter']:checked")[0].id;
				if(query===null||!query.length){console.log("search null");
					if(s){console.log("search null w/ s");return;}
					Explorer.getAll(0, 9);return;
				}else{
					for(var i=0;i<Pref.searchBox.length;i++){
						if(Pref.searchBox[i][type].indexOf(query)!=-1)result.push(Pref.searchBox[i]);
						//result.push(JSON.stringify(Pref.searchBox[i]).toString());
						//console.log(JSON.stringify(Pref.searchBox[i]));
					}
				}
				console.log("result: "+result.length)
				if(result.length>10){this.searchResult=result;}else{$("#more,#less").hide();this.searchResult=[];}
				if(result){
					Explorer.some=(s)?[Explorer.some[0]+10,Explorer.some[1]+10]:[0,9];
					Explorer.showC(result,1);//$("#resultBox").text(""+result);
				}
				if(!result.length){
					$("#more,#less").hide();
					$("#explorer tbody").append("<tr><td colspan='6'>No Cookies found.</td></tr>");
					$("#noOfC").text("");
				}
			}, searchResult: []
		}, tools: {
			init: function(){
				$("#checkAll").click(function(){
					$(":checkbox[name='selectedC']").attr("checked",$('#checkAll').is(':checked'))});
				$("#deleteC").click(function(){Explorer.tools.deleteC();});
				$(window).keydown(function(e){
				var keys=",36,37,39,46,70,";
				if(keys.search(","+e.which+",")==-1||e.target.id=="search"){return;}
				console.log("Keycode "+e.which+" Pressed.");
				switch(e.which){
					case 36:
					if(!$("#search").val().length){
						Explorer.getAll(0,9);
					}
					break;
					case 37:
					if(document.getElementById("less").style.display!="none"){
						$("#less").click();
					}
					break;
					case 39:
					if(document.getElementById("more").style.display!="none"){
						$("#more").click();
					}
					break;
					case 46:
					if($("input[name='selectedC']:checked").length){
						$("#deleteC").click();
					}
					break;
					case 70:
					if(e.ctrlKey){
						e.preventDefault();
						$("#search").focusin();
					}
					default:
					break;
				}
				});
			}, initDOM: function(){
				$("#explorer table td").click(function(){
					$(this).parentsUntil("tbody").find(":checkbox")[0].click();
				});
				$("img[class^='delC']").click(function(e){
					e.stopPropagation()
					$(this).parentsUntil("tbody").find(":checkbox")[0].click();
					Explorer.tools.deleteC();
				});
			}, deleteC: function(){
				var data = [];
				var t=$(":checkbox[name='selectedC']:checked");
				console.log(t);
				if(!$(t).length){return;}
				$(t).each(function(i){
					var childC = $(this).parent().nextAll();
					//console.log(childC)
					var lastData;
					$(childC).each(function(ii){
						if(ii>2||ii==0){return;}
						switch(ii){
						case 1:
						var u = $(this).text();
						if(u.slice(0,1)=="."){u="http://"+u.slice(1);
						}else{u="http://"+u;}
						lastData={"url":u};
						case 2:
						data[i]=({"url":lastData.url,"name":$(this).text()});
						};
						//console.log(lastData);
					})
					//console.log(data);
				});
				for(var i=0;i<data.length;i++){
					console.log(data[i]);
					chrome.cookies.remove(data[i]);
				}
				Explorer.searchBox.getRecord(1);
				if($("#search").val().length){
					console.log($("#search").val().length);
					Explorer.searchBox.search($("#search").val(),1);
				}else{
					Explorer.getAll();
				}
			}, setItem: function(key, value) {
				try {
					this.log("Inside setItem:" + key + ":" + value);
					window.localStorage.removeItem(key);
					window.localStorage.setItem(key, value);
				} catch (e) {
					this.log("Error inside setItem");
					this.log(e);
				}
				//this.log("Return from setItem" + key + ":" + value);
			}, getItem: function(key) {
				var value;
				this.log('Get Item:' + key);
				try {
					value = window.localStorage.getItem(key);
				} catch (e) {
					this.log("Error inside getItem() for key:" + key);
					this.log(e);
					value = "null";
				}
				this.log("Returning value: " + value);
				return value;
			}, clearStrg: function() {
				this.log('about to clear local storage');
				window.localStorage.clear();
				this.log('cleared');
			}, log: function(txt) {
				if ($("#log>input")[0].checked) {
					if(txt.length>500){console.log(txt.slice(0,500)+"...");return;}
					console.log(txt);
				}
			}
		}
	}
	var Debug = {
		mode: (function(){return !!localStorage["log"];})()
		, log: 0
		, init: function(){
			$("#log>input")[0].checked=!!localStorage["log"];
			$(window).resize(function(){
				$("#log").css({"position":"absolute","left":function(){return $("#explorer").offset().left+$("#explorer").width()-60;},"top":function(){return $("h2").offset().top+10;}})
			});
			$("#log").css({"position":"absolute","left":function(){return $("#explorer").offset().left+$("#explorer").width()-60;},"top":function(){return $("h2").offset().top+10;}})
			$("#log>input").click(function(){
				if(this.checked){
					localStorage["log"]=1;window.console.log=Debug.oldLog;
				}else{
					localStorage["log"]="";window.console.log=function(){};
				}
			});
			this.oldLog=window.console.log;
			if(!this.mode){window.console.log=function(){};return;}else{return;}
			$("#debug").show().hover(function(){
				$(this).css({"width":"300px","overflow":"auto","background":"#FEA","padding":"10px"}).scrollTop(this.scrollHeight);
				$("#debug p").css("color","rgba(0,0,0,1)");
				var t=$(this).children().last();
				$("#debug p").removeClass("hL");
				$(t).prevUntil("hr").addClass("hL");
			},function(){
				setTimeout(function(e){
				$(e).css({"padding":"10px 20px 10px 10px","width":"50px","overflow":"hidden","background":"rgba(255,238,170,0.5)"});
				$("#debug p").css("color","rgba(0,0,0,.5)");
				},500,this)
			});
			if(this.mode){setInterval(function(){var t=$("#debug").children().last().get(0).tagName;if(t!="HR"&&t!="SPAN")$("#debug").append("<hr>")},500,this)}
		}, log: function(e){
			(this.mode)?$("#debug").append("<p>"+e+"</p>"):console.log(e);
		}
	}
	var init = function (f) {
		f.init();
	}
	
	init(Debug);
	init(Explorer);
});
</script>
</head>
<body>
<div id="explorer">
<h2>Chromkie - Cookies Explorer</h2>
<div id='log'><input name='log' type='checkbox' id='lC'><label for='lC'>Log</label></div>
Search Cookies by <div id='filter'><input type="radio" name="filter" id="domain" checked /><label for='domain'>Domain</label><input type="radio" name="filter" id="name" /><label for='name'>Name</label><input type="radio" name="filter" id="value" /><label for='value'>Value</label></div> <input name="search" type="text" id="search" value="" size="60">
<img id="reloadRec" height="16" width="16" src="refresh.png"/>
<table align="center" cellpadding="5">
<tr id="explorer_header">
<th scope="col"><input id='checkAll' type='checkbox'></th>
<th scope="col"><img id="deleteC" src="cross.png"/></th>
<th nowrap scope="col">Domain</th>
<th nowrap scope="col">Name</th>
<th scope="col">Value</th>
<th nowrap scope="col">Expire Date</th>
</tr>
</table>
<span id='noOfC'> Showing of </span>
</div>
<div id="debug"></div>
</body>
</html>